import imgSrc from "@/assets/image/posture/pei.png";
import { fontSize } from "@/utils/px2rem.js";
import { useYearStore } from "@/store/index.js";
export const options = {
  //网络人格权纠纷
  NetPersonality(data) {
    const { year } = useYearStore();
    let options = {
      legend: {
        top: "middle",
        right: fontSize(50),
        orient: "vertical",
        textStyle: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
        itemWidth: fontSize(8),
        itemHeight: fontSize(8),
        itemGap: fontSize(10),
      },
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(101, 118, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(95, 113, 255, 0.18)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(65, 138, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(65, 138, 255, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(111, 213, 145, 1)",
            },
            {
              offset: 1,
              color: "rgba(111, 213, 145, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 213, 101, 1)",
            },
            {
              offset: 1,
              color: "rgba(255, 213, 101, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 207, 241, 1)",
            },
            {
              offset: 1,
              color: "rgba(0, 207, 241, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(130, 203, 254, 1)",
            },
            {
              offset: 1,
              color: "rgba(130, 203, 254, 0.20)",
            },
          ],
        },
      ],
      tooltip: {
        trigger: "axis",
        backgroundColor: "RGBA(22, 39, 82, 0.8)",
        borderColor: "RGBA(83, 106, 175, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
      },
      grid: {
        top: fontSize(30),
        bottom: 0,
        left: fontSize(16),
        right: fontSize(160),
        containLabel: true,
      },
      xAxis: {
        data: [year - 1, year],
        axisLabel: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
        axisLine: {
          lineStyle: {
            color: "#6C8097",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        name: "(件)",
        nameTextStyle: {
          fontSize: fontSize(14),
          color: "#D0DEEE",
        },
        axisLabel: {
          color: "#D0DEEE",
          textStyle: {
            color: "#D0DEEE",
            padding: [0, fontSize(8), 0, 0],
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(108, 128, 151, 0.3)",
            type: "dashed",
          },
        },
      },
      series: data.map((item, index) => {
        let seriesItem = {
          name: item.aymc,
          type: "bar",
          stack: "total",
          itemStyle: {
            borderRadius: [0, 0, 0, 0],
          },
          barWidth: fontSize(44),
          emphasis: {
            focus: "series",
          },
          data: [item[`las${year - 1}`], item[`las${year}`]],
        };
        if (index === data.length - 1) {
          seriesItem.label = {
            show: true,
            color: "#D0DEEE",
            position: "top",
            formatter: function (e) {
              if (e.name.indexOf(year) > -1) {
                return data.reduce(
                  (pre, next) => pre + next[`las${year}`] * 1,
                  0
                );
              } else {
                return data.reduce(
                  (pre, next) => pre + next[`las${year - 1}`] * 1,
                  0
                );
              }
            },
          };
        }
        return seriesItem;
      }),
    };
    return options;
  },

  //网络服务合同纠纷
  LoanRatio(htjfData) {
    const data = [
      { name: "一万以下", value: htjfData.ywyx.replace("%", "") },
      { name: "1万～5万", value: htjfData.ywdww.replace("%", "") },
      { name: "5万～100万", value: htjfData.wwdybw.replace("%", "") },
      { name: "100万以上", value: htjfData.ybwys.replace("%", "") },
    ];
    const options = {
      graphic: {
        elements: [
          {
            type: "image",
            z: 6,
            style: {
              image: imgSrc,
              width: fontSize(60),
              height: fontSize(60),
              shadowBlur: 0,
              shadowColor: "#000",
              shadowOffsetX: "1",
              shadowOffsetY: "1",
            },
            left: "24.8%",
            top: "center",
          },
        ],
      },
      title: {
        text: "立案标的额分布",
        left: "61%",
        top: "-2%",
        textStyle: {
          color: "#fff",
          fontSize: fontSize(14),
          fontWeight: "600",
        },
      },
      color: ["#9171FF", "#418AFF", "#FFD565", "#6FD591", "#879FFF", "#5A64FF"],
      legend: {
        orient: "vertical",
        top: fontSize(22),
        left: "61%",
        y: "20%",
        itemWidth: fontSize(6),
        itemHeight: fontSize(6),
        itemGap: fontSize(16),
        align: "left",
        textStyle: {
          rich: {
            name: {
              fontSize: fontSize(12),
              color: "#D0DEEE",
            },
            value: {
              fontSize: fontSize(12),
              padding: [0, fontSize(5), 0, fontSize(5)],
              color: "#D0DEEE",
            },
          },
        },
        formatter: function (name) {
          let value = 0;
          data.forEach((item) => {
            if (item.name == name) {
              value = (item.value * 1).toFixed(2);
            }
          });
          return "{name|" + name + "：}" + "{value|" + value + "%}";
        },
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "75%"],
          center: ["31%", "50%"],
          label: { show: false },
          labelLine: { show: false },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          data: data,
        },
        {
          // 外边框
          center: ["31%", "50%"],
          radius: ["90%", "90%"],
          silent: true,
          type: "pie",
          zlevel: -1,
          label: { show: false },
          labelLine: { show: false },
          animation: false,
          tooltip: {
            show: false,
          },
          data: [
            {
              value: 1,
              itemStyle: {
                borderWidth: 1,
                borderColor: "rgba(21, 154, 255, 0.2)",
              },
            },
          ],
        },
      ],
    };
    return options;
  },

  // 信息网络买卖合同纠纷、产品责任纠纷
  ContractRatio(data) {
    data = data.map((item) => {
      return {
        value: item.zbz,
        name: item.zbm,
      };
    });
    const options = {
      graphic: {
        elements: [
          {
            type: "image",
            z: 6,
            style: {
              image: imgSrc,
              width: fontSize(60),
              height: fontSize(60),
              shadowBlur: 0,
              shadowColor: "#000",
              shadowOffsetX: "1",
              shadowOffsetY: "1",
            },
            left: "24.8%",
            top: "center",
          },
        ],
      },

      color: ["#FF9434", "#FF685C", "#FFD565", "#9171FF", "#159AFF"],
      legend: {
        orient: "vertical",
        left: "61%",
        y: "center",
        itemWidth: fontSize(6),
        itemHeight: fontSize(6),
        itemGap: fontSize(12),
        align: "left",
        textStyle: {
          rich: {
            name: {
              fontSize: fontSize(12),
              color: "#D0DEEE",
            },
            value: {
              fontSize: fontSize(12),
              padding: [0, fontSize(5), 0, fontSize(5)],
              color: "#D0DEEE",
            },
          },
        },
        formatter: function (name) {
          let total = 0;
          let value = 0;
          data.forEach((item) => {
            total += item.value;
            if (item.name == name) {
              value = item.value;
            }
          });
          return "{name|" + name + "：}" + "{value|" + value + "件}";
        },
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "75%"],
          center: ["31%", "50%"],
          label: { show: false },
          labelLine: { show: false },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          data,
        },

        {
          // 外边框
          center: ["31%", "50%"],
          radius: ["90%", "90%"],
          silent: true,
          type: "pie",
          zlevel: -1,
          label: { show: false },
          labelLine: { show: false },
          animation: false,
          tooltip: {
            show: false,
          },
          data: [
            {
              value: 1,
              itemStyle: {
                borderWidth: 1,
                borderColor: "rgba(21, 154, 255, 0.2)",
              },
            },
          ],
        },
      ],
    };
    return options;
  },

  // 新就业形态劳动争议纠纷
  NewJobForm(data) {
    data = data.map((item) => {
      return {
        value: item.zbz,
        name: item.zbm,
      };
    });
    let options = {
      color: ["#41E1FF", "#FFD565", "#6FD591", "#C36FD5", "#418AFF"],
      grid: {
        left: "2%",
        top: "1%",
        bottom: 10,
        right: "1%",
        containLabel: true,
      },
      legend: {
        orient: "vertical",
        left: "61%",
        y: "center",
        itemWidth: fontSize(6),
        itemHeight: fontSize(6),
        itemGap: fontSize(12),
        align: "left",
        textStyle: {
          rich: {
            name: {
              fontSize: fontSize(12),
              color: "#D0DEEE",
            },
            value: {
              fontSize: fontSize(12),
              padding: [0, fontSize(5), 0, fontSize(5)],
              color: "#D0DEEE",
            },
          },
        },
        formatter: function (name) {
          let obj = data.find((item) => item.name === name);
          if (!obj) return;
          return "{name|" + name + "：} {value|" + obj.value + "件}";
        },
      },

      calculable: true,
      series: [
        {
          stack: "a",
          type: "pie",
          radius: ["20%", "70%"],
          center: ["32%", "35%"],
          roseType: "area",
          zlevel: 10,
          label: {
            normal: {
              formatter: function (params) {
                var result = "";
                if (params.name) {
                  result +=
                    params.name + "{blue|" + "\n" + params.value + "%" + "}";
                }
                return result;
              },
              borderWidth: 0,
              borderRadius: 4,
              padding: [-fontSize(30), -fontSize(20), 0, fontSize(-20)],
              height: 10,
              fontSize: fontSize(12),
              align: "center",
              color: "#DEDEDE",
              rich: {
                blue: {
                  fontSize: fontSize(12),
                  lineHeight: fontSize(36),
                  color: "#fff",
                },
              },
            },
          },
          labelLine: {
            normal: {
              show: true,
              length: fontSize(10),
              length2: fontSize(20),
              lineStyle: {
                type: "solid",
                color: "#1F5CA4",
              },
            },
            emphasis: {
              show: false,
            },
          },
          data,
        },
      ],
    };
    return options;
  },

  // 涉数据、虚拟财产纠纷和个人信息保护纠纷
  VirtualProperty(data) {
    const { year } = useYearStore();
    let options = {
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 213, 101, 1)",
            },
            {
              offset: 1,
              color: "rgba(255, 213, 101, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(101, 118, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(95, 113, 255, 0.18)",
            },
          ],
        },
      ],
      tooltip: {
        trigger: "axis",
        backgroundColor: "RGBA(22, 39, 82, 0.8)",
        borderColor: "RGBA(83, 106, 175, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
      },
      legend: {
        top: fontSize(-5),
        right: "0",
        itemWidth: fontSize(10),
        itemHeight: fontSize(10),
        textStyle: {
          color: "#D0DEEE",
          fontSize: fontSize(14),
        },
      },
      grid: {
        top: fontSize(40),
        bottom: fontSize(12),
        left: fontSize(12),
        right: fontSize(12),
        containLabel: true,
      },
      xAxis: {
        data: [year - 1, year],
        axisLabel: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
        axisLine: {
          lineStyle: {
            color: "#6C8097",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        name: "(件)     ",
        nameGap: 10,
        nameTextStyle: {
          fontSize: fontSize(12),
          color: "#D0DEEE",
          align: "center",
        },
        axisLabel: {
          color: "#D0DEEE",
          textStyle: {
            color: "#D0DEEE",
            padding: [0, fontSize(8), 0, 0],
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(108, 128, 151, 0.3)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: data[0].aymc,
          type: "bar",
          itemStyle: {
            borderRadius: [fontSize(20), fontSize(20), 0, 0],
          },
          barWidth: fontSize(15),
          emphasis: {
            focus: "series",
          },
          data: [data[0][`las${year - 1}`], data[0][`las${year}`]],
          label: {
            show: true,
            color: "#D0DEEE",
            position: "top",
            fontSize: fontSize(12),
          },
        },
        {
          name: data[1].aymc,
          type: "bar",
          barWidth: fontSize(15),
          itemStyle: {
            borderRadius: [fontSize(20), fontSize(20), 0, 0],
          },
          label: {
            show: false,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          emphasis: {
            focus: "series",
          },
          label: {
            show: true,
            color: "#D0DEEE",
            position: "top",
            fontSize: fontSize(12),
          },
          data: [data[1][`las${year - 1}`], data[1][`las${year}`]],
        },
      ],
    };
    return options;
  },

  // 数据资源刑事案件、数据资源
  sourOptions(data) {
    const { year } = useYearStore();
    let options = {
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 213, 101, 1)",
            },
            {
              offset: 1,
              color: "rgba(255, 213, 101, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(101, 118, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(95, 113, 255, 0.18)",
            },
          ],
        },
      ],
      tooltip: {
        trigger: "axis",
        backgroundColor: "RGBA(22, 39, 82, 0.8)",
        borderColor: "RGBA(83, 106, 175, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
      },
      legend: {
        top: fontSize(-5),
        right: "10",
        itemWidth: fontSize(10),
        itemHeight: fontSize(10),
        textStyle: {
          color: "#D0DEEE",
          fontSize: fontSize(14),
        },
      },
      grid: {
        top: fontSize(40),
        bottom: fontSize(12),
        left: fontSize(12),
        right: fontSize(12),
        containLabel: true,
      },
      xAxis: {
        data: [year - 1, year],
        axisLabel: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
        axisLine: {
          lineStyle: {
            color: "#6C8097",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        name: "(件)     ",
        nameGap: 10,
        nameTextStyle: {
          fontSize: fontSize(12),
          color: "#D0DEEE",
          align: "center",
        },
        axisLabel: {
          color: "#D0DEEE",
          textStyle: {
            color: "#D0DEEE",
            padding: [0, fontSize(8), 0, 0],
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(108, 128, 151, 0.3)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "数据资源刑事案件",
          type: "bar",
          itemStyle: {
            borderRadius: [fontSize(20), fontSize(20), 0, 0],
          },
          barWidth: fontSize(15),
          emphasis: {
            focus: "series",
          },
          data: data.map((item) => item.xsaj),
          label: {
            show: true,
            color: "#D0DEEE",
            position: "top",
            fontSize: fontSize(12),
          },
        },
        {
          name: "数据资源行政案件",
          type: "bar",
          barWidth: fontSize(15),
          itemStyle: {
            borderRadius: [fontSize(20), fontSize(20), 0, 0],
          },
          label: {
            show: false,
            color: "#FFFFFF",
            formatter: "{a}",
          },
          emphasis: {
            focus: "series",
          },
          label: {
            show: true,
            color: "#D0DEEE",
            position: "top",
            fontSize: fontSize(12),
          },
          data: data.map((item) => item.xzaj),
        },
      ],
    };
    return options;
  },

  //其他互联网民事案件
  Receiptsbalances(data = {}) {
    const { year } = useYearStore();
    let options = {
      color: [
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(255, 213, 101, 1)",
            },
            {
              offset: 1,
              color: "rgba(255, 213, 101, 0.20)",
            },
          ],
        },
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(101, 118, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(95, 113, 255, 0.18)",
            },
          ],
        },
      ],
      tooltip: {
        trigger: "axis",
        backgroundColor: "RGBA(22, 39, 82, 0.8)",
        borderColor: "RGBA(83, 106, 175, 0.6)",
        padding: fontSize(10),
        textStyle: {
          color: "#fff",
          fontSize: fontSize(12),
        },
      },
      legend: {
        top: fontSize(-5),
        right: "0",
        itemWidth: fontSize(10),
        itemHeight: fontSize(10),
        textStyle: {
          color: "#D0DEEE",
          fontSize: fontSize(14),
        },
      },
      grid: {
        top: fontSize(40),
        bottom: fontSize(12),
        left: fontSize(12),
        right: fontSize(12),
        containLabel: true,
      },
      xAxis: {
        data: [year - 1, year],
        axisLabel: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
        },
        axisLine: {
          lineStyle: {
            color: "#6C8097",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        name: "(件)     ",
        nameGap: 10,
        nameTextStyle: {
          fontSize: fontSize(12),
          color: "#D0DEEE",
          align: "center",
        },
        axisLabel: {
          color: "#D0DEEE",
          textStyle: {
            color: "#D0DEEE",
            padding: [0, fontSize(8), 0, 0],
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(108, 128, 151, 0.3)",
            type: "dashed",
          },
        },
      },
      series: [
        {
          name: "收案数据",
          type: "bar",
          itemStyle: {},
          barWidth: fontSize(14),
          emphasis: {
            focus: "series",
          },
          label: {
            show: true,
            color: "#D0DEEE",
            position: "top",
            fontSize: fontSize(12),
          },
          data: [data[`las${year - 1}`], data[`las${year}`]],
        },
        {
          name: "结案数据",
          type: "bar",
          barWidth: fontSize(14),
          itemStyle: {},
          label: {
            show: true,
            color: "#D0DEEE",
            position: "top",
            fontSize: fontSize(12),
          },
          emphasis: {
            focus: "series",
          },

          data: [data[`las${year - 1}`], data[`las${year}`]],
        },
      ],
    };
    return options;
  },
};
